<template>
  <div>
    <el-dialog
      
      :title="details.planName"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-card shadow="never">
        <!-- {{details}} -->
        <el-form
          :disabled="disabled"
          :model="details"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="计划名称" prop="planName">
            <el-input v-model="details.planName"></el-input>
          </el-form-item>
          <el-form-item label="任务状态" prop="planStatus">
            <template v-for="(item, index) in search.planStatus">
              <el-radio
                v-if="index != 0"
                :key="index"
                v-model="details.planStatus"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </template>
          </el-form-item>

          <el-form-item label="采集区域" required>



            <el-col :span="11">
              <div class="block">
                <el-cascader
                  type="primary"
                  :options="options"
                  :props="props"
                  collapse-tags
                  @change="changecollectTaskTown"
                  v-model="form.area"
                ></el-cascader>
              </div>
            </el-col>
          </el-form-item>

          <el-form-item label="采集时间" required>
            <el-col :span="11">
              <el-form-item prop="planStartTime">
                <el-date-picker
                  type="datetime"
                  placeholder="采集任务开始时间"
                  v-model="details.planStartTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-form-item prop="planEndTime">
                <el-date-picker
                  type="datetime"
                  placeholder="采集任务结束时间"
                  v-model="details.planEndTime"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-form-item label="采集要求">
            <el-input
              type="textarea"
              class="textarea"
              v-model="details.planRequire"
            ></el-input>
          </el-form-item>

          <el-form-item label="图片">

          

            <el-image
              style="width: 120px; margin: 5px"
              v-for="item in details.ossImgList"
              fit="fill"
              :key="item.id"
              :src="item.imgUrl"
            ></el-image>


            
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDetails">取 消</el-button>
        <el-button type="primary" @click="EditDetails">前往编辑</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { convertKey } from "@/library";
import { mapGetters } from "vuex";
export default {
  name: "TaskLook",
  props: {
    details: {
      type: Object,
    },
  },
  data() {
    return (
      {
        disabled: true,
        treeDataProps: {
          children: "children",
          value: "administrativeCode",
          label: "administrativeName",
        },
        area: [
          ["440605011", "440605011001"],
          ["440605011", "440605011002"],
        ],
        props: {
          multiple: true,
        },
        search: {
          planName: "",
          planStatus: [
            {
              value: "",
              label: "全部",
            },
            {
              value: 1,
              label: "未发布",
            },
            {
              value: 2,
              label: "已发布",
            },
            {
              value: 3,
              label: "已撤回",
            },
            {
              value: 4,
              label: "已启用",
            },
            {
              value: 5,
              label: "已停用",
            },
          ],
          value: "",
        },
      }
    );
  },

  computed: {
    ...mapGetters({
      options: "getTreeData/filtersVillage",
    }),
  },

  methods: {
    EditDetails() {
      alert(1);
    },
  },
};
</script>